<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="css/app.css" />
		<link href="css/my.css" rel="stylesheet" />
		<style>
			.title {
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav bc2">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" id="title"></h1>
		</header>
		<div class="mui-content bc">
			<div class="mui-card bc2">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<h4 id="name"></h4>
						<hr>
						<span>作者：<span id="author"></span></span>
						<br>
						<span>人气：<span id="clickNum"></span></span>
						<br>
						<span>收藏：<span id="starNum"></span></span>
						<br>
						<span>更新：<span id="updateTime"></span></span>
						<br>
						<span>简介：<span id="descs" style="text-indent:2em;"></span></span>
					</div>
				</div>
			</div>
			<div class="mui-card bc2">
				<div class="mui-row" align="center" style="margin-top: 10px;margin-bottom: 10px;">
					<div class="mui-col-sm-3 mui-col-xs-3">
						<!-- <a id="star"><span class="mui-icon mui-icon-star"></span>收藏此书</a> -->
						<button type="button" id="star" data-loading-text="收藏中" class="mui-btn mui-btn-warning ">收藏此书</button>
					</div>
					<div class="mui-col-sm-3 mui-col-xs-3">
						<!-- <a id="update"><span class="mui-icon mui-icon-reload"></span>检查更新</a> -->
						<button type="button" id="update" data-loading-text="更新中" class="mui-btn mui-btn-success ">检查更新</button>
					</div>
					<div class="mui-col-sm-3 mui-col-xs-3">
						<!-- <a id="feedback"><span class="mui-icon mui-icon-help"></span>问题反馈</a> -->
						<button type="button" id="fromType" class="mui-btn mui-btn-primary ">切换书源</button>
					</div>
					<div class="mui-col-sm-3 mui-col-xs-3">
						<!-- <a id="feedback"><span class="mui-icon mui-icon-help"></span>问题反馈</a> -->
						<button type="button" id="feedback" class="mui-btn mui-btn-danger ">问题反馈</button>
					</div>
				</div>
			</div>
			<div class="mui-card bc2">
				<div class="mui-card-content">
					<div class="title">
						章节列表
						<div style="float: right;"><a id="sortAsc">正序</a>&nbsp;&nbsp;<a id="sortDesc">倒序</a></div>
						<hr>
					</div>
					<ul class="mui-table-view bc2" id="chapterList" style="font-size: 16px;">
					</ul>
				</div>
			</div>
		</div>

	</body>
	<script src="js/mui.min.js"></script>
	<script src="js/config.js"></script>
	<script src="js/date.js"></script>
	<script src="js/book.js"></script>
	<script>
		var self;
		var bookNumber;
		var id;
		var bookName;
		var deviceNum;
		var next = 1;
		var sort = 'asc';
		var updateFlag = false;
		var chapterTitle;
		mui.init({
			beforeback: function(){
					//获得列表界面的webview
					var view = plus.webview.currentWebview().opener();
					//触发列表界面的自定义事件（refresh）,从而进行数据刷新
					if(view != null && view.id == 'home.html'){
						mui.fire(view,'refresh');
					}
					//返回true，继续页面关闭逻辑
					return true;
			},
			pullRefresh: {
				container: '.mui-content', //待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
				up: {
					height: 50, //可选.默认50.触发上拉加载拖动距离
					auto: false, //可选,默认false.自动上拉加载一次
					contentrefresh: "正在加载", //可选，正在加载状态时，上拉加载控件上显示的标题内容
					contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
					callback: more //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
				},
				down : {
				  style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
				  color:'#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
				  height:'50px',//可选,默认50px.下拉刷新控件的高度,
				  range:'100px', //可选 默认100px,控件可下拉拖拽的范围
				  offset:'0px', //可选 默认0px,下拉刷新控件的起始位置
				  auto: false,//可选,默认false.首次加载自动下拉刷新一次
				  callback :init //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
				}
			},
		});
		mui.plusReady(function() {
			var view = plus.webview.getWebviewById("chapter.html");
			if(view != null){
				view.close();
			}
			deviceNum = plus.storage.getItem("deviceNum");
			self = plus.webview.currentWebview();
			getBookTag();
			init();
			var fromType = plus.storage.getItem("fromType-" + self.num);
			if (fromType == null || fromType == "") {
				plus.storage.setItem("fromType-" + self.num, "uutxt");
			}
			window.addEventListener('refresh', page);
		});

		function init() {
			mui.ajax(config.config.path + "/book/" + self.num, {
				type: "GET",
				dataType: "json",
				success: function(result) {
					var code = result.code;
					if (code == 200) {
						id = result.data.id;
						bookNumber = result.data.number;
						bookName = result.data.name;
						document.getElementById("title").innerHTML = result.data.name;
						document.getElementById("name").innerHTML = result.data.name;
						document.getElementById("descs").innerHTML = "<br><p>" + (result.data.synopsis != null ? result.data.synopsis : '无') + "</p>";
						document.getElementById("author").innerHTML = result.data.author;
						document.getElementById("clickNum").innerHTML = result.data.clickNum;
						document.getElementById("starNum").innerHTML = result.data.starNum;
						try{
							document.getElementById("updateTime").innerHTML = new Date(result.data.updateTime).Format(
								"yyyy-MM-dd hh:mm:ss");
						}catch(e){
							console.log(e);
						}
						
						page();
					}
				}
			});
		}

		function getBookTag(){
			mui.ajax(config.config.path + "/book-tag/" + self.num + "/" + deviceNum, {
				type: "GET",
				dataType: "json",
				success: function(result) {
					var code = result.code;
					if (code == 200) {
						chapterTitle = result.data.chapterTitle;
					}
				}
			});
		}

		function page() {
			var agoInfo = plus.storage.getItem('agoInfo');
			if (agoInfo != null && agoInfo.bookNum == self.num) {
				chapterTitle = agoInfo.chapterTitle;
			}
			var fromType = plus.storage.getItem("fromType-" + self.num);
			mui.ajax(config.config.path + "/chapter/page?limit=" + config.config.chapterPageSize + "&page=1&sort=" + sort +
				"&sort_column=id&bookNumber=" + bookNumber + "&fromType=" + fromType, {
					type: "GET",
					dataType: "json",
					success: function(result) {
						var code = result.code;
						if (code == 200) {
							var ele = document.getElementById("chapterList");
							var html = "";
							for (j = 0, len = result.data.records.length; j < len; j++) {
								html = html + '<li class="mui-table-view-cell" id="' + result.data.records[j].id 
								+ '" name="' + bookName 
								+ '" num="' + result.data.records[j].num 
								+ '">' + result.data.records[j].title 
								+ (result.data.records[j].title == chapterTitle ? '<span class="mui-badge mui-badge-danger">上次读到</span>' : '')
								+ '</li>';
							}
							if(html == ""){
								html = '暂无章节信息，请尝试检查更新或更换书源';
							}
							ele.innerHTML = html;
							next = 2;
						}
						mui('.mui-content').pullRefresh().endPulldown();
					}
				});
		}

		function more() {
			var agoInfo = plus.storage.getItem('agoInfo');
			if (agoInfo != null && agoInfo.bookNum == self.num) {
				chapterTitle = agoInfo.chapterTitle;
			}
			var fromType = plus.storage.getItem("fromType-" + self.num);
			mui.ajax(config.config.path + "/chapter/page?limit=" + config.config.chapterPageSize + "&page=" + next + "&sort=" +
				sort + "&sort_column=id&bookNumber=" + bookNumber + "&fromType=" + fromType, {
					type: "GET",
					dataType: "json",
					success: function(result) {
						var code = result.code;
						if (code == 200) {
							var table = document.body.querySelector('#chapterList');
							if (result.data.records.length > 0) {
								for (j = 0, len = result.data.records.length; j < len; j++) {
									var html = result.data.records[j].title;
									if(result.data.records[j].title == chapterTitle){
										html = html + '<span class="mui-badge mui-badge-danger">上次读到</span>';
									}
									var div = document.createElement('li');
									div.className = "mui-table-view-cell";
									div.id = result.data.records[j].id;
									div.setAttribute("name",bookName);
									div.setAttribute("num",result.data.records[j].num);
									div.name = bookName;
									div.innerHTML = html;
									table.appendChild(div);
								}
								next++;
								mui('.mui-content').pullRefresh().endPullupToRefresh(false);
							} else {
								mui('.mui-content').pullRefresh().endPullupToRefresh(true);
							}
						}
					}
				});
		}

		document.getElementById("sortAsc").addEventListener('tap', function() {
			sort = 'asc';
			page();
		});
		
		document.getElementById("sortDesc").addEventListener('tap', function() {
			sort = 'desc';
			page();
		});

		document.getElementById("feedback").addEventListener('tap', function() {
			mui.openWindow({
				url: "feedback.html",
				id: "feedback.html",
				extras: { //自定义扩展参数，可以用来处理页面间传值
					bookId: id,
					content: "对《" + bookName + "》的建议："
				},
				createNew: false, //是否重复创建同样id的webview，默认为false:不重复创建，直接显示
				show: {
					autoShow: true //页面loaded事件发生后自动显示，默认为true/页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
				},
				waiting: {
					autoShow: true, //自动显示等待框，默认为true
					title: '正在加载...' //等待对话框上显示的提示内容
				}
			});
		});
		
		document.getElementById("update").addEventListener('tap', function() {
			if(updateFlag){
				return;
			}
			updateFlag = true;
			mui("#update").button('loading');
			var fromType = plus.storage.getItem("fromType-" + self.num);
			
			mui.ajax(config.config.path + "/book/update/" + id + "/" + fromType, {
				type: "GET",
				dataType: "json",
				success: function(result) {
					var code = result.code;
					if (code == 200) {
						init();
						if(sort == 'desc'){
							page();
						}
						mui.toast('更新了' + result.data + '章哦^o^', {
							duration: 'short',
							type: 'div'
						})
					} else if (code == 204) {
						mui.toast('还未更新0.0', {
							duration: 'short',
							type: 'div'
						})
					}
					updateFlag = false;
					// ele.innerHTML = '<span class="mui-icon mui-icon-reload"></span>检查更新';
					mui("#update").button('reset');
				}
			});
		});
		
		
		document.getElementById("star").addEventListener('tap', function() {
			mui("#satr").button('loading');
			mui.ajax(config.config.path + "/collection", {
				data:{
					"bookId":id,
					"deviceNum":deviceNum,
					"bookNumber":bookNumber
				},
				type: "POST",
				dataType: "json",
				contentType: 'application/json;charset=utf-8',
				success: function(result) {
					var code = result.code;
					if (code == 200) {
						mui.toast('收藏成功', {
							duration: 'short',
							type: 'div'
						})
					} else {
						mui.toast(result.message, {
							duration: 'short',
							type: 'div'
						})
					}
					mui("#star").button('reset');
				}
			});
		});
		
		mui(".mui-table-view").on('tap', '.mui-table-view-cell', function() {
			//获取id
			var cId = this.getAttribute("id");
			var name = this.getAttribute("name");
			var num = this.getAttribute("num");
			//传值给详情页面，通知加载新数据
			chapter(cId,name,id,bookNumber,num,false);
		});
		
		
		document.getElementById("fromType").addEventListener('tap', function() {
			mui.openWindow({
				url: "fromType.html",
				show: {
					autoShow: true //页面loaded事件发生后自动显示，默认为true/页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
				},
				extras: { //自定义扩展参数，可以用来处理页面间传值
					bookId: self.num,
					bookNumber:bookNumber
				},
				waiting: {
					autoShow: false, //自动显示等待框，默认为true
					title: '正在加载...' //等待对话框上显示的提示内容
				}
			});
		});
	</script>
</html>
